import {
  BarsOutlined,
  FileSearchOutlined,
  FolderViewOutlined,
  FundProjectionScreenOutlined,
  VideoCameraAddOutlined,
} from '@ant-design/icons';
import { Badge, Card, Layout, Menu } from 'antd';
import { SelectInfo } from 'rc-menu/lib/interface';
import React, { useEffect, useState } from 'react';
import { useAccess, useModel } from 'umi';
import PageContainerMonitorArticle from './article/components/PageContainerMonitorArticle';
import PageContainerMonitorVideo from './video/components/PageContainerMonitorVideo';
import PageContainerMonitorLive from './live/components/PageContainerMonitorLive';
import { setToken } from '@/utils/token';
import { DrawerForm, PageContainer } from '@ant-design/pro-components';
import { parse } from '@/utils/historyUtils';
import PageAudioVisualBriefing from './briefing/components/PageAudioVisualBriefing';
import './index.less';
import AddAudioVisual from './briefing/components/AddAudioVisual';
import MonitorVideo from './video';
import MonitorArticle from './article';
import MonitorLinkage from './linkage';

export default (): React.ReactNode => {
  const access = useAccess();
const { initialState } = useModel('@@initialState');
  const { currentUser } = initialState || {};
  const [tabActiveKey, setTabActiveKeyState] = useState<string>( 'article');
  const [selectMenuName, setSelectMenuName] = useState<string>('图文审读');
  const [loading, setLoadingState] = useState<boolean>(false);
  const [menuVisible,setMenuVisible]=useState(false)
  useEffect(() => {
    const { token } = parse(location.search) as { token: string };
    if (token && token.length > 0) {
      setToken(token);
    }
  }, []);
  const menuList = () => {
    if (currentUser?.permissions.includes('monitorhc:page')) {
      return [
        {
          label: <span>图文审读{renderBadge(0, tabActiveKey === 'article')}</span>,
          key: 'article',
          icon: <FileSearchOutlined />,
        },
        {
          label: <span>短视频监测{renderBadge(0, tabActiveKey === 'video')}</span>,
          key: 'video',
          icon: <FolderViewOutlined />,
        },
        {
          label: <span>联动处置{renderBadge(0, tabActiveKey === 'live')}</span>,
          key: 'linkage',
          icon: <VideoCameraAddOutlined />,
        },
        // {
        //   label: <span>视听简报{renderBadge(0, tabActiveKey === 'briefing')}</span>,
        //   key: 'briefing',
        //   icon: <FundProjectionScreenOutlined />,
        // },
      ];
    } else {
      return [
        {
          label: <span>图文审读{renderBadge(0, tabActiveKey === 'article')}</span>,
          key: 'article',
          icon: <FileSearchOutlined />,
        },
        {
          label: <span>短视频监测{renderBadge(0, tabActiveKey === 'video')}</span>,
          key: 'video',
          icon: <FolderViewOutlined />,
        },
        {
          label: <span>联动处置{renderBadge(0, tabActiveKey === 'live')}</span>,
          key: 'linkage',
          icon: <VideoCameraAddOutlined />,
        },
      ];
    }
  };
  const renderBadge = (count: number, active = false) => {
    return (
      <Badge
        count={count}
        style={{
          marginBlockStart: -2,
          marginInlineStart: 4,
          color: active ? '#1890FF' : '#999',
          backgroundColor: active ? '#E6F7FF' : '#eee',
        }}
      />
    );
  };

  return (
    <PageContainer
      header={{
        // title:
        title: (
          <div>
            <DrawerForm
              width="200px"
              trigger={<BarsOutlined style={{ fontSize: 20 }} />}
              drawerProps={{
                destroyOnClose: true,
                placement: 'left',
                closable: false,
              }}
              visible={menuVisible}
              onVisibleChange={(visible: boolean) => {
                if (visible) {
                }
                setMenuVisible(visible)
              }}
              submitter={false}
              onFinish={async (values) => {}}
            >
              <Menu
                onSelect={(info) => {
                  const key = info.key;
                  let menuName = '';
                  if (key === 'article') {
                    menuName = '图文审读';
                  }
                  if (key === 'video') {
                    menuName = '短视频监测';
                  }
                  if (key === 'linkage') {
                    menuName = '联动处置';
                  }
                  if (key === 'briefing') {
                    menuName = '视听简报';
                  }
                  if (key === 'IntelligentRecommendation') {
                    menuName = '智能选题推荐';
                  }
                  setMenuVisible(!menuVisible)
                  setTabActiveKeyState(info.key);
                  setSelectMenuName(menuName);
                }}
                style={{ width: '100%', height: '100%', borderInlineEnd: 'none' }}
                defaultSelectedKeys={[tabActiveKey]}
                mode="vertical"
                items={menuList()}
              />
            </DrawerForm>
            <span style={{ marginLeft: 10 }}>{selectMenuName}</span>
          </div>
        ),
        breadcrumb: {
          items: [],
        },
        style: {
          paddingBlockEnd: 0,
        },
        // extra: (
        //     <>
        //         {tabActiveKey === 'briefing' && <AddAudioVisual onRefurbish={() => { setLoadingState(!loading) }}
        //         />}
        //     </>
        // ),
      }}
    >
      {tabActiveKey === 'article' ? (
        <MonitorArticle />
      ) : tabActiveKey === 'video' ? (
        <MonitorVideo />
      ) : tabActiveKey === 'linkage' ? (
        <MonitorLinkage />
      ) : (
        <></>
      )}
    </PageContainer>
  );
};
